# ESLint 插件

import { SourceCode } from 'rspress/theme';

<SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-eslint" />

ESLint 插件用于在编译过程中运行 ESLint 检查，插件内部集成了 [eslint-webpack-plugin](https://www.npmjs.com/package/eslint-webpack-plugin)。

:::tip
由于 ESLint 的开销较大，运行 ESLint 检查可能会使构建时间显著增加。
:::

## 快速开始

### 安装插件

你可以通过如下的命令安装插件:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsbuild/plugin-eslint -D" />

### 注册插件

你可以在 `rsbuild.config.ts` 文件中注册插件：

```ts title="rsbuild.config.ts"
import { pluginEslint } from '@rsbuild/plugin-eslint';

export default {
  plugins: [pluginEslint()],
};
```

## 示例项目

- [React + ESLint 项目](https://github.com/rspack-contrib/rspack-examples/tree/main/rsbuild/react-eslint)
- [Vue 3 + ESLint 项目](https://github.com/rspack-contrib/rspack-examples/tree/main/rsbuild/vue3-eslint)

## 选项

### enable

是否开启 ESLint 检查。

- **类型：** `boolean`
- **默认值：** `true`
- **示例：**

禁用 ESLint 检查：

```js
pluginEslint({
  enable: false,
});
```

仅在生产环境构建时开启检查：

```js
pluginEslint({
  enable: process.env.NODE_ENV === 'production',
});
```

仅在开发环境构建时开启检查：

```js
pluginEslint({
  enable: process.env.NODE_ENV === 'development',
});
```

### eslintPluginOptions

修改 `eslint-webpack-plugin` 的选项，请参考 [eslint-webpack-plugin - README](https://github.com/webpack-contrib/eslint-webpack-plugin#readme) 了解可用选项。

- **类型：** [Options](https://github.com/webpack-contrib/eslint-webpack-plugin/blob/master/types/options.d.ts)
- **默认值：**

```ts
const defaultOptions = {
  extensions: ['js', 'jsx', 'mjs', 'cjs', 'ts', 'tsx', 'mts', 'cts'],
  exclude: [
    'node_modules',
    'dist', // -> rsbuildConfig.output.distPath.root
  ],
};
```

`eslintPluginOptions` 对象会与默认配置对象进行浅合并。

- 比如开启 ESLint v9 的 flat config：

```ts
pluginEslint({
  eslintPluginOptions: {
    cwd: __dirname,
    configType: 'flat',
  },
});
```

- 比如通过 `exclude` 排除一些文件：

```ts
pluginEslint({
  eslintPluginOptions: {
    exclude: ['node_modules', 'dist', './src/foo.js'],
  },
});
```

- 比如扩展 extensions 来校验 `.vue` 或 `.svelte` 文件：

```ts
pluginEslint({
  eslintPluginOptions: {
    extensions: ['js', 'jsx', 'mjs', 'cjs', 'ts', 'tsx', 'mts', 'cts', 'vue'],
  },
});
```
